'use client'

import { Search } from 'lucide-react' // 你可以用 lucide 图标库（Tailwind + React 最搭）

export default function DiligenceFocus() {
  const focusList = [
    {
      area: 'Validate TNB contract & deployment',
      why: 'Need signed volume, delivery schedule, payment triggers; confirm $42M HW + $10.8M ARR is real, not aspirational.'
    },
    {
      area: 'Security posture & compliance',
      why: 'Prior FTC action heightens the bar; require latest third-party audits, pen tests, OTA update security, NIST/CIS mapping, SOC 2 timeline.'
    },
    {
      area: 'Reliability & manufacturing readiness',
      why: 'Confirm field failure rates, certification proofs (BS EN12320, IP67/68), battery performance, yield, supply chain, and warranty reserves.'
    },
    {
      area: 'Unit economics & GTM repeatability',
      why: 'Verify gross margins by SKU, support costs, pilot-to-paid conversion beyond TNB, and SMB sales metrics (CAC, payback, sales cycle).'
    }
  ]

  return (
    <div className="rec-card w-full max-w-6xl mx-auto rounded-2xl p-[16px] shadow-[0_0_20px_rgba(0,0,0,0.3)] text-gray-300">
      {/* 标题 */}
      <h2 className="text-[#9fb7ff] text-sm font-semibold uppercase tracking-wider mb-4">Suggested Diligence Focus</h2>

      {/* 表格 */}
      <div className="overflow-x-auto">
        <table className="w-full border-collapse text-left text-sm">
          <thead>
            <tr className="text-[#8ea2c9] border-b border-[#2b3142]">
              <th className="py-3 px-4 font-semibold w-1/3">Focus Area</th>
              <th className="py-3 px-4 font-semibold">Why It Matters</th>
            </tr>
          </thead>
          <tbody>
            {focusList.map((item, i) => (
              <tr key={i} className="border-b border-[#1f2533] last:border-0 hover:bg-[#161b26]/40 transition-colors">
                <td className="py-4 px-4 font-medium flex items-center gap-2 text-white">
                  <div className="flex items-center justify-center w-6 h-6 rounded-full bg-gradient-to-br from-[#8b5cf6]/30 to-[#38bdf8]/30">
                    <Search size={14} className="text-[#9fb7ff]" />
                  </div>
                  {item.area}
                </td>
                <td className="py-4 px-4 text-gray-300 leading-relaxed">{item.why}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  )
}
